<template>
  <div class="container">
    <h2>啦啦啦</h2>
    <!-- 动态类名 -->
    <!-- <h2 :class="['类名1','类名2']">啦啦啦</h2> -->
    <!-- <h2 :class="['abc', flag ?'thin' : '']">啦啦啦</h2> -->

    <!-- <h2 :class="{类名1:布尔值,类名2:布尔值}">啦啦啦</h2> -->
    <h2 :class="{abc: true, thin: flag}">啦啦啦</h2>
    <button @click="flag = !flag">切换类名</button>

    <!--  动态样式 -->
    <!-- <p :style="{样式名称：值，样式名称：值}">这是app得p</p> -->
    <p :style="{ padding:'20px'}">这是app得p</p>
    <my-left></my-left>
  </div>
</template>

<script>
import MyLeft from './components/MyLeft.vue'
export default {
  data () {
    return {
      flag: true
    }
  },
  components: { MyLeft }
}
</script>

<style lang="less" scoped>
  .container {
    background-color: pink;
    h2 {
      font-size: 24px;
    }
  }
  p {
      color: aqua;
    }
  .container /deep/ p {
    background-color: orange;
  }
  .c {
    color: blueviolet;
  }
  .thin {
    color: brown;
  }
</style>